<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="../../resources/include/header.jsp" %>    
<script src="./resources/js/jquery.js"></script> 
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=267e27e5ce63a61a2c543d45ad8da156&libraries=services"></script>


<img src="./resources/images/twdh.jpg">
<h2>Store list</h2>

<table border="1">
	<tr>
		<th>st_id</th>
		<th>name</th>
		<th>addr</th>
		<th>lati</th>
		<th>longi</th>
	</tr>
	<c:forEach var="list" items="${list }">
		<tr>
			<td align="center">${list.st_id }</td>
			<td align="center"><a href="">${list.name }</a></td>
			<td align="center">${list.addr }</td>
			<td align="center">${list.latitude }</td>
			<td align="center">${list.longitude }</td>
		</tr>
	</c:forEach>
</table>

	<div id="map" style="width:500px;height:420px; display:none;"></div>
 
<script>
	
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
	mapOption = {
	    center: new daum.maps.LatLng(37.5010226, 127.0396037), // 지도의 중심좌표
	    level: 3 // 지도의 확대 레벨
	};	
	var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
	
	//타입 컨트롤
	var mapTypeControl = new daum.maps.MapTypeControl();
	map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
	//줌컨트롤
	var zoomControl = new daum.maps.ZoomControl();
	map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
	
	alert("map loaded");
</script>